<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会员中心 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .bottom-nav {
      border-top: 1px solid var(--border);
    }
    
    .tab-active {
      color: var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .level-card {
      background: linear-gradient(135deg, #ff9f55 0%, #ff7e2d 100%);
      color: white;
      border-radius: 12px;
    }
    
    .level-progress {
      height: 8px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }
    
    .level-progress-bar {
      height: 8px;
      background-color: white;
      border-radius: 4px;
    }
    
    .tab-item.active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .privilege-card {
      border: 1px solid var(--border);
    }
    
    .privilege-card.active {
      border: 1px solid var(--primary);
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <h1 class="text-lg font-medium flex-1 text-center">会员中心</h1>
      <a href="#" class="text-sm primary-color">会员规则</a>
    </div>
    
    <!-- 会员卡 -->
    <div class="p-4">
      <div class="level-card p-5">
        <div class="flex justify-between items-center mb-4">
          <div>
            <h2 class="text-xl font-bold">普通会员</h2>
            <p class="text-sm opacity-80 mt-1">会员有效期至：2024-12-31</p>
          </div>
          <div class="text-right">
            <p class="text-sm opacity-80">当前积分</p>
            <p class="text-2xl font-bold">210</p>
          </div>
        </div>
        
        <div class="mb-2">
          <div class="flex justify-between text-sm mb-1">
            <span>距离升级还需：290积分</span>
            <span>500积分</span>
          </div>
          <div class="level-progress">
            <div class="level-progress-bar" style="width: 42%;"></div>
          </div>
        </div>
        
        <div class="flex justify-between mt-4">
          <button class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
            <i class="fas fa-gift mr-1"></i> 每日签到
          </button>
          <button class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
            <i class="fas fa-arrow-up mr-1"></i> 立即升级
          </button>
        </div>
      </div>
    </div>
    
    <!-- 会员权益 -->
    <div class="px-4">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold">会员权益</h3>
        <a href="#" class="text-sm text-gray-500">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
      </div>
      
      <div class="grid grid-cols-4 gap-3">
        <div class="text-center">
          <div class="w-14 h-14 rounded-full primary-light-bg flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-percentage text-lg primary-color"></i>
          </div>
          <p class="text-xs">专享折扣</p>
        </div>
        <div class="text-center">
          <div class="w-14 h-14 rounded-full primary-light-bg flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-ticket-alt text-lg primary-color"></i>
          </div>
          <p class="text-xs">专属优惠券</p>
        </div>
        <div class="text-center">
          <div class="w-14 h-14 rounded-full primary-light-bg flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-headset text-lg primary-color"></i>
          </div>
          <p class="text-xs">优先客服</p>
        </div>
        <div class="text-center">
          <div class="w-14 h-14 rounded-full primary-light-bg flex items-center justify-center mx-auto mb-2">
            <i class="fas fa-birthday-cake text-lg primary-color"></i>
          </div>
          <p class="text-xs">生日礼包</p>
        </div>
      </div>
    </div>
    
    <!-- 会员等级对比 -->
    <div class="px-4 mt-6">
      <h3 class="font-bold mb-4">会员等级对比</h3>
      <div class="overflow-x-auto">
        <table class="w-full text-center">
          <thead>
            <tr class="border-b border-gray-100">
              <th class="py-3 px-2 text-left text-sm font-medium text-gray-500">权益内容</th>
              <th class="py-3 px-2 text-sm font-medium">普通会员</th>
              <th class="py-3 px-2 text-sm font-medium primary-color">银卡会员</th>
              <th class="py-3 px-2 text-sm font-medium primary-color">金卡会员</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-100">
              <td class="py-3 px-2 text-left text-sm">专享折扣</td>
              <td class="py-3 px-2 text-sm">95折</td>
              <td class="py-3 px-2 text-sm primary-color">9折</td>
              <td class="py-3 px-2 text-sm primary-color">8.5折</td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="py-3 px-2 text-left text-sm">每月优惠券</td>
              <td class="py-3 px-2 text-sm">3张</td>
              <td class="py-3 px-2 text-sm primary-color">5张</td>
              <td class="py-3 px-2 text-sm primary-color">8张</td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="py-3 px-2 text-left text-sm">积分倍率</td>
              <td class="py-3 px-2 text-sm">1倍</td>
              <td class="py-3 px-2 text-sm primary-color">1.2倍</td>
              <td class="py-3 px-2 text-sm primary-color">1.5倍</td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="py-3 px-2 text-left text-sm">生日礼包</td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-check text-gray-400"></i></td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-check primary-color"></i></td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-check primary-color"></i></td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="py-3 px-2 text-left text-sm">专属客服</td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-times text-gray-400"></i></td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-check primary-color"></i></td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-check primary-color"></i></td>
            </tr>
            <tr>
              <td class="py-3 px-2 text-left text-sm">免费体检</td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-times text-gray-400"></i></td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-times text-gray-400"></i></td>
              <td class="py-3 px-2 text-sm"><i class="fas fa-check primary-color"></i></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- 会员中心标签页 -->
    <div class="mt-6 border-b border-gray-100">
      <div class="flex">
        <div class="flex-1 text-center py-3 tab-item active">
          我的权益
        </div>
        <div class="flex-1 text-center py-3 tab-item text-gray-500">
          积分明细
        </div>
        <div class="flex-1 text-center py-3 tab-item text-gray-500">
          积分兑换
        </div>
      </div>
    </div>
    
    <!-- 我的权益内容 -->
    <div class="p-4">
      <div class="grid grid-cols-2 gap-4">
        <div class="privilege-card active rounded-lg p-4">
          <div class="flex justify-between items-center mb-2">
            <h4 class="font-medium">专享折扣</h4>
            <span class="text-xs primary-bg text-white px-2 py-1 rounded-full">已激活</span>
          </div>
          <p class="text-xs text-gray-500 mb-2">所有服务享受95折优惠</p>
          <p class="text-xs text-gray-400">有效期至：2024-12-31</p>
        </div>
        
        <div class="privilege-card rounded-lg p-4">
          <div class="flex justify-between items-center mb-2">
            <h4 class="font-medium">生日礼包</h4>
            <span class="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded-full">待领取</span>
          </div>
          <p class="text-xs text-gray-500 mb-2">生日当月可领取专属礼包</p>
          <p class="text-xs text-gray-400">有效期至：2024-12-31</p>
        </div>
        
        <div class="privilege-card rounded-lg p-4">
          <div class="flex justify-between items-center mb-2">
            <h4 class="font-medium">积分兑换券</h4>
            <span class="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded-full">可使用</span>
          </div>
          <p class="text-xs text-gray-500 mb-2">200积分兑换50元优惠券</p>
          <p class="text-xs text-gray-400">剩余：1次</p>
        </div>
        
        <div class="privilege-card rounded-lg p-4">
          <div class="flex justify-between items-center mb-2">
            <h4 class="font-medium">会员专享券</h4>
            <span class="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded-full">已领取</span>
          </div>
          <p class="text-xs text-gray-500 mb-2">每月3张专属优惠券</p>
          <p class="text-xs text-gray-400">本月剩余：2张</p>
        </div>
      </div>
      
      <!-- 升级会员按钮 -->
      <div class="mt-6">
        <button class="w-full btn-primary py-3 rounded-lg font-medium">
          立即升级会员
        </button>
      </div>
    </div>
    
    <!-- 底部空间 -->
    <div class="pb-20"></div>
    
    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 z-10 bg-white bottom-nav" style="max-width: 480px; margin: 0 auto;">
      <div class="grid grid-cols-5 py-1">
        <a href="index.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-home text-lg"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a href="orders.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-clipboard-list text-lg"></i>
          <span class="text-xs mt-1">订单</span>
        </a>
        <a href="messages.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-comment-dots text-lg"></i>
          <span class="text-xs mt-1">消息</span>
        </a>
        <a href="membership.html" class="flex flex-col items-center py-1 tab-active">
          <i class="fas fa-crown text-lg"></i>
          <span class="text-xs mt-1">会员</span>
        </a>
        <a href="profile.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-user text-lg"></i>
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </div>
  </div>
  
  <script>
    // 简单的导航激活状态切换
    document.addEventListener('DOMContentLoaded', function() {
      const navItems = document.querySelectorAll('.bottom-nav a');
      navItems.forEach(item => {
        item.addEventListener('click', function() {
          navItems.forEach(i => i.classList.remove('tab-active'));
          navItems.forEach(i => i.classList.add('text-gray-500'));
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
        });
      });
      
      // 会员中心标签页切换
      const tabItems = document.querySelectorAll('.tab-item');
      tabItems.forEach(item => {
        item.addEventListener('click', function() {
          tabItems.forEach(i => i.classList.remove('active'));
          tabItems.forEach(i => i.classList.add('text-gray-500'));
          this.classList.add('active');
          this.classList.remove('text-gray-500');
        });
      });
    });
  </script>
</body>
</html> 